<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-07-23 15:39:11
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-09-11 17:08:19
 * @FilePath: \fbhgl_client\src\pages\park\booking-management\whitelist\index.page.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { createState } from "./state";
import { jeecgBootHomeEeUsingPost } from "@/genapi/exam";

defineOptions({ name: "IndexPage" });
const { page, detailDialogRef } = createState();

const img = import.meta.glob("./assets/*.png", {
	import: "default",
	eager: true,
});

const statisticData1 = ref([
	{
		title: "运输人员",
		count: 1096,
		rate: 20.5,
	},
	{
		title: "押运人员",
		count: 1002,
		rate: 20.5,
	},
	{
		title: "装卸管理人员",
		count: 1003,
		rate: 20.5,
	},
]);

const statisticData2 = ref([
	{
		title: "运输人员",
		count: 1028,
		rate: 20.5,
	},
	{
		title: "押运人员",
		count: 1021,
		rate: 20.5,
	},
	{
		title: "装卸管理人员",
		count: 1126,
		rate: 20.5,
	},
]);

function toThousands(num) {
	var result = [],
		counter = 0;
	num = (num || 0).toString().split("");
	for (var i = num.length - 1; i >= 0; i--) {
		counter++;
		result.unshift(num[i]);
		if (!(counter % 3) && i != 0) {
			result.unshift(",");
		}
	}
	return result.join("");
}

let bgColor = "#fff";
let title = "培训报名";
let color = ["#21CCFF", "#313CA9", "#249EFF"];
let echartData = ref([
	{
		name: "运输人员",
		value: "3720",
	},
	{
		name: "押运人员",
		value: "2920",
	},
	{
		name: "装卸管理人员",
		value: "2200",
	},
]);

let formatNumber = function (num) {
	let reg = /(?=(\B)(\d{3})+$)/g;
	return num.toString().replace(reg, ",");
};
let total = ref(0);

const option1 = {
	backgroundColor: bgColor,
	color: color,
	// tooltip: {
	//     trigger: 'item'
	// },
	title: [
		{
			text: "{name|" + "培训报名" + "}\n{val|" + total.value + "}",
			top: "32%",
			left: "center",
			textStyle: {
				rich: {
					name: {
						fontSize: 14,
						fontWeight: "normal",
						color: "#666666",
						padding: [10, 0],
					},
					val: {
						fontSize: 32,
						fontWeight: "bold",
						color: "#333333",
					},
				},
			},
		},
	],
	legend: {
		orient: "horizontal",
		bottom: 10,
		itemWidth: 24,
		itemGap: 15,
		itemHeight: 14,
		align: "left",
		textStyle: {
			rich: {
				name: {
					fontSize: 12,
				},
				value: {
					fontSize: 16,
					padding: [0, 5, 0, 15],
				},
				unit: {
					fontSize: 12,
				},
			},
		},
		formatter: function (name) {
			let res = echartData.value.filter((v) => v.name === name);
			res = res[0] || {};
			let unit = res.unit || "";
			return "{name|" + name + "}";
		},
		// data: legendName
	},
	series: [
		{
			type: "pie",
			radius: ["45%", "70%"],
			center: ["50%", "45%"],
			data: echartData.value,
			hoverAnimation: false,
			itemStyle: {
				normal: {
					borderColor: bgColor,
					borderWidth: 2,
				},
			},
			labelLine: {
				normal: {
					length: 20,
					length2: 120,
					lineStyle: {
						color: "#e6e6e6",
					},
				},
			},
			label: {
				normal: {
					formatter: (params) => {
						if (params.value && total.value) {
							return (
								"{icon|●}{name|" +
								"}{value|" +
								(params.value / total.value).toFixed(2) * 100 +
								"%}"
							);
						} else {
							return "{icon|●}{name|" + "}{value|" + "0%}";
						}
					},
					padding: [0, -100, 25, -100],
					rich: {
						icon: {
							fontSize: 16,
						},
						name: {
							fontSize: 14,
							padding: [0, 10, 0, 4],
							color: "#666666",
						},
						value: {
							fontSize: 18,
							fontWeight: "bold",
							color: "#333333",
						},
					},
				},
			},
		},
	],
};

const option2 = {
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
	},
	legend: {
		data: ["未开始", "进行中", "已完成"],
		align: "right",
		right: 10,
		textStyle: {},
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 35,
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true,
	},
	xAxis: [
		{
			type: "category",
			data: ["运输人员", "押运人员", "装卸管理人员"],
			axisLine: {
				show: true,
				lineStyle: {
					width: 1,
					type: "solid",
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				show: true,
				textStyle: {},
			},
		},
	],
	yAxis: [
		{
			type: "value",
			axisLabel: {},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
				lineStyle: {
					width: 1,
					type: "solid",
				},
			},
			splitLine: {
				lineStyle: {},
			},
		},
	],
	series: [
		{
			name: "未开始",
			type: "bar",
			data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
			barWidth: 13, //柱子宽度
			itemStyle: {
				normal: {
					color: "#246EFF",
					opacity: 1,
				},
			},
		},
		{
			name: "进行中",
			type: "bar",
			data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
			barWidth: 13,
			itemStyle: {
				normal: {
					color: "#00B2FF",
					opacity: 1,
				},
			},
		},
		{
			name: "已完成",
			type: "bar",
			data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
			barWidth: 13,
			itemStyle: {
				normal: {
					color: "#81E2FF",
					opacity: 1,
				},
			},
		},
	],
};

const option3 = {
	tooltip: {
		trigger: "axis",
		axisPointer: {
			// 坐标轴指示器，坐标轴触发有效
			type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
		},
	},
	legend: {
		data: ["未开始", "未通过", "通过"],
		align: "right",
		right: 10,
		textStyle: {},
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 35,
	},
	grid: {
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true,
	},
	xAxis: {
		type: "value",
	},
	yAxis: {
		type: "category",
		data: ["运输人员", "押运人员", "装卸管理人员"],
	},
	series: [
		{
			name: "未开始",
			type: "bar",
			stack: "总量",
			label: {
				normal: {
					show: true,
					position: "insideRight",
				},
			},
			barWidth: 30,
			itemStyle: {
				normal: {
					color: "#246EFF",
					opacity: 1,
				},
			},
			data: [320, 302, 301],
		},
		{
			name: "未通过",
			type: "bar",
			stack: "总量",
			label: {
				normal: {
					show: true,
					position: "insideRight",
				},
			},
			barWidth: 30,
			itemStyle: {
				normal: {
					color: "#00B2FF",
					opacity: 1,
				},
			},
			data: [120, 132, 101],
		},
		{
			name: "通过",
			type: "bar",
			stack: "总量",
			label: {
				normal: {
					show: true,
					position: "insideRight",
				},
			},
			barWidth: 30,
			itemStyle: {
				normal: {
					color: "#81E2FF",
					opacity: 1,
				},
			},
			data: [220, 182, 191],
		},
	],
};

const getHomeData = async () => {
	const res = await jeecgBootHomeEeUsingPost({});
	if (res.code === 200) {
		statisticData1.value[0].count = res.result.trainSignUpSts[0].cymCount;
		statisticData1.value[0].rate = res.result.trainSignUpSts[0].growth;

		statisticData1.value[1].count = res.result.trainSignUpSts[1].cymCount;
		statisticData1.value[1].rate = res.result.trainSignUpSts[1].growth;

		statisticData1.value[2].count = res.result.trainSignUpSts[2].cymCount;
		statisticData1.value[2].rate = res.result.trainSignUpSts[2].growth;

		statisticData2.value[0].count = res.result.examSignUpSts[0].cymCount;
		statisticData2.value[0].rate = res.result.examSignUpSts[0].growth;

		statisticData2.value[1].count = res.result.examSignUpSts[1].cymCount;
		statisticData2.value[1].rate = res.result.examSignUpSts[1].growth;

		statisticData2.value[2].count = res.result.examSignUpSts[2].cymCount;
		statisticData2.value[2].rate = res.result.examSignUpSts[2].growth;

		echartData.value[0].value = res.result.categorySts.data[0];

		echartData.value[1].value = res.result.categorySts.data[1];

		echartData.value[2].value = res.result.categorySts.data[2];

		total.value = res.result?.categorySts.data.reduce(
			(accumulator, currentValue) => accumulator + currentValue,
			0,
		);
		option1.title[0].text =
			"{name|" + "培训报名" + "}\n{val|" + total.value + "}";

		const chart1 = echarts.init(document.getElementById("chart1"));
		chart1.setOption(option1);

		option2.xAxis[0].data = res.result.trainProgressSts.axials;
		option2.legend.data = res.result.trainProgressSts.status;
		option2.series[0].data = res.result.trainProgressSts.dataA;
		option2.series[1].data = res.result.trainProgressSts.dataB;
		option2.series[2].data = res.result.trainProgressSts.dataC;

		const chart2 = echarts.init(document.getElementById("chart2"));
		chart2.setOption(option2);

		option3.yAxis.data = res.result.examProgressSts.axials;
		option3.legend.data = res.result.examProgressSts.status;
		option3.series[0].data = res.result.examProgressSts.dataA;
		option3.series[1].data = res.result.examProgressSts.dataB;
		option3.series[2].data = res.result.examProgressSts.dataC;

		const chart3 = echarts.init(document.getElementById("chart3"));
		chart3.setOption(option3);
	}
};

onBeforeMount(() => {
	getHomeData();
});
</script>

<template>
	<!-- <page-content> -->
		<div class="homePage">
			<div class="statisticContent">
				<div class="contentTitle">培训报名统计</div>
				<div class="contentBox">
					<div
						class="dataBox dataBox1"
						v-for="(item, i) in statisticData1"
						:key="i"
					>
						<div class="dataContent">
							{{ item.title }}
							<div class="dataCount">{{ toThousands(item.count) }}</div>
							<div class="dataRate">
								<div class="rateContent">{{ item.rate }}</div>
								同比增长
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="statisticContent">
				<div class="contentTitle">考试报名统计</div>
				<div class="contentBox">
					<div
						class="dataBox dataBox2"
						v-for="(item, i) in statisticData2"
						:key="i"
					>
						<div class="dataContent">
							{{ item.title }}
							<div class="dataCount">{{ toThousands(item.count) }}</div>
							<div class="dataRate">
								<div class="rateContent">{{ item.rate }}</div>
								同比增长
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="bottomContent">
				<div class="chartContent">
					<div class="contentTitle">培训报名人员类型占比</div>
					<div id="chart1" class="chartBox">
						<BaseEchart :option="option1"></BaseEchart>
					</div>
				</div>
				<div class="chartContent">
					<div class="contentTitle">人员培训进度状态统计</div>
					<div id="chart2" class="chartBox">
						<BaseEchart :option="option2"></BaseEchart>
					</div>
				</div>
				<div class="chartContent">
					<div class="contentTitle">人员考试进度状态统计</div>
					<div id="chart3" class="chartBox">
						<BaseEchart :option="option3"></BaseEchart>
					</div>
				</div>
			</div>
		</div>
	<!-- </page-content> -->
</template>

<style lang="scss" scoped>
.homePage {
	width: 98%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  align-items: center;
	overflow-y: auto;
	position: relative;
  background: #F7F8FA;
  margin: 20px;
	.statisticContent {
		width: 100%;
		height: 25%;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
    padding: 0 20px;
		.contentTitle {
      padding-top: 10px;
			width: 100%;
			height: 30px;
      font-weight: 1000;
      font-size: 16px;
      color: #1D2129;
		}
		.contentBox {
			width: 100%;
			height: calc(100% - 40px);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.dataBox {
				width: 32%;
				height: 90%;
				background-repeat: no-repeat;
				background-position: 88% 67%;
				.dataContent {
					width: 37%;
					height: 100%;
					padding: 20px 30px;
					font-size: 15px;
					.dataCount {
						font-size: 24px;
						letter-spacing: 1px;
						margin-top: 6px;
						font-weight: 600;
					}
					.dataRate {
						width: 100%;
						height: 30px;
						margin-top: 10px;
						display: flex;
						justify-content: space-around;
						font-size: 13px;
						.rateContent {
							color: rgba(43, 164, 113, 1);
							background-color: rgba(227, 249, 233, 1);
							display: flex;
							justify-content: center;
							align-items: center;
							width: 80px;
							height: 20px;
						}
					}
				}
			}
		}
		.dataBox1 {
			&:nth-child(1) {
				background-image: url("./assets/sta1.png");
				background-color: rgba(230, 244, 254, 0.719);
			}
			&:nth-child(2) {
				background-image: url("./assets/sta2.png");
				background-color: rgba(230, 254, 238, 0.719);
			}
			&:nth-child(3) {
				background-image: url("./assets/sta3.png");
				background-color: rgba(236, 236, 255, 0.719);
			}
		}
		.dataBox2 {
			&:nth-child(1) {
				background-image: url("./assets/sta4.png");
				background-color: rgba(236, 236, 255, 0.719);
			}
			&:nth-child(2) {
				background-image: url("./assets/sta5.png");
				background-color: rgba(255, 228, 228, 0.719);
			}
			&:nth-child(3) {
				background-image: url("./assets/sta6.png");
				background-color: rgba(230, 244, 254, 0.719);
			}
		}
	}
	.bottomContent {
		width: 100%;
		height: 47%;
		display: flex;
		justify-content: space-between;
    background: #F7F8FA;
    // background: #FFFFFF;
    // padding: 0 20px;
		.chartContent {
			width: 32.7%;
			height: 100%;
      padding-left: 20px;
      background: #FFFFFF;
			.contentTitle {
        padding-top: 10px;
				width: 100%;
				height: 30px;
        font-weight: 1000;
        font-size: 16px;
        color: #1D2129;
			}
			.chartBox {
				width: 100%;
				height: calc(100% - 30px);
			}
		}
	}
}
</style>
